<!DOCTYPE html>
<html>

<head>
    <title>进入/离开 & 列表过渡</title>

    <!-- 开发环境版本，包含了有帮助的命令行警告 -->
    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>

    <style>
        .fade-enter-active,
        .fade-leave-active {
            transition: opacity .5s;
        }

        .fade-enter,
        .fade-leave-to

        /* .fade-leave-active below version 2.1.8 */
            {
            opacity: 0;
        }

        /* 可以设置不同的进入和离开动画 */
        /* 设置持续时间和动画函数 */
        .slide-fade-enter-active {
            transition: all .3s ease;
        }

        .slide-fade-leave-active {
            transition: all .8s cubic-bezier(1.0, 0.5, 0.8, 1.0);
        }

        .slide-fade-enter,
        .slide-fade-leave-to

        /* .slide-fade-leave-active for below version 2.1.8 */
            {
            transform: translateX(10px);
            opacity: 0;
        }

        .bounce-enter-active {
            animation: bounce-in .5s;
        }

        .bounce-leave-active {
            animation: bounce-in .5s reverse;
        }

        @keyframes bounce-in {
            0% {
                transform: scale(0);
            }

            50% {
                transform: scale(1.5);
            }

            100% {
                transform: scale(1);
            }
        }
    </style>

</head>

<body>
    <!-- 单元素/组件的过渡 -->
    <div id="demo">
        <button v-on:click="show = !show">Toggle</button>
        <transition name="fade">
            <p v-if="show">hello</p>
        </transition>
    </div>


    <!-- CSS 过渡 -->
    <div id="example-1">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="slide-fade">
            <p v-if="show">hello</p>
        </transition>
    </div>


    <!-- CSS 动画 -->
    <div id="example-2">
        <button @click="show = !show">Toggle show</button>
        <transition name="bounce">
            <p v-if="show">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Mauris facilisis enim libero, at
                lacinia diam fermentum id. Pellentesque habitant morbi tristique senectus et netus.</p>
        </transition>
    </div>


    <!-- 自定义过渡的类名 -->
    <link href="https://cdn.jsdelivr.net/npm/animate.css@3.5.1" rel="stylesheet" type="text/css">

    <div id="example-3" style="margin-left: 200px;">
        <button @click="show = !show">
            Toggle render
        </button>
        <transition name="custom-classes-transition" enter-active-class="animated tada"
            leave-active-class="animated bounceOutRight">
            <!-- <p v-if="show">hello</p> -->
            <div v-if="show" style="width: 150px; height: 50px; background-color: blueviolet;" >
                <h1>Testing</h1>
            </div>
        </transition>
    </div>

    <script>
        // 单元素/组件的过渡
        new Vue({
            el: '#demo',
            data: {
                show: true
            }
        });


        // CSS 过渡
        new Vue({
            el: '#example-1',
            data: {
                show: true
            }
        });


        // CSS 动画
        new Vue({
            el: '#example-2',
            data: {
                show: true
            }
        });


        // 自定义过渡的类名
        new Vue({
        el: '#example-3',
        data: {
        show: true
        }
        });
    </script>
</body>

</html>